<template>
  <div>
    <!-- 订单 -->
    <div class="top">
      <a-descriptions :column="4">
        <a-descriptions-item label="订单编号">{{ data?.orderId }}</a-descriptions-item>
        <a-descriptions-item label="运单编号">{{ data?.id }}</a-descriptions-item>
        <a-descriptions-item label="下单时间">{{ data?.created }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">{{
          statuss[data.order?.status] || 1
        }}</a-descriptions-item>
        <a-descriptions-item label="预计到达日期">
          {{ data.order?.estimatedArrivalTime }}</a-descriptions-item
        >
      </a-descriptions>
    </div>
    <!-- 基本信息 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="1" header="基本信息">
          <div class="jian">
            <img src="../../../assets/fahuo.png" alt="" width="15" height="15" />
            <a-descriptions :column="2" title="发货方">
              <a-descriptions-item label="发货方姓名：">{{
                data.order?.senderName
              }}</a-descriptions-item>
              <a-descriptions-item label="发货方电话：">{{
                data.order?.senderPhone
              }}</a-descriptions-item>
              <a-descriptions-item label="发货方地址：">
                {{ data.order?.senderProvince.name }}{{ data.order?.senderCity.name
                }}{{ data.order?.senderCounty.name }}</a-descriptions-item
              >
              <a-descriptions-item label="详细地址">{{
                data.order?.senderAddress
              }}</a-descriptions-item
              >s
            </a-descriptions>
          </div>
          <div class="jian">
            <img src="../../../assets/shouhuo.png" alt="" width="15" height="15" />
            <a-descriptions :column="2" title="收货方">
              <a-descriptions-item label="收货方姓名">
                {{ data.order?.receiverName }}
              </a-descriptions-item>
              <a-descriptions-item label="收货方电话">
                {{ data.order?.receiverPhone }}</a-descriptions-item
              >
              <a-descriptions-item label="收货方地址">
                {{ data.order?.receiverProvince.name }}{{ data.order?.receiverCity.name
                }}{{ data.order?.receiverCounty.name }}</a-descriptions-item
              >
              <a-descriptions-item label="详细地址">
                {{ data.order?.receiverAddress }}</a-descriptions-item
              >
            </a-descriptions>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 运输信息 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="2" header="运输信息">
          <div class="transport">
            <a-steps current="0" labelPlacement="vertical" style="width: 400px">
              <a-step :title="startAgency" />
              <a-step :title="endAgency" />
            </a-steps>
            <div class="hezi">
              <div class="li">
                <p>
                  运输任务：<span style="color: blue">{{ data.orderId }}</span>
                </p>
              </div>
              <div class="li">
                <p><span class="sp">车辆：</span>{{ car }}</p>
              </div>
              <div class="li">
                <p><span class="sp">司机：</span>{{ driver }}</p>
              </div>
              <div class="li"><p>到达时间：--</p></div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 货品信息 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="3" header="货品信息">
          <a-table :columns="columns" :data-source="datalist" :pagination="false">
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'goodsType'">
                {{ text.name }}
              </template>
            </template>
          </a-table>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getTransportManagerByIdAPI } from '@/services/transportManager'
const route = useRoute()
// 接受参数ID
const id = ref(0)
const getId = () => {
  id.value = route.query.id
}
getId()

// 运输信息 起始和结束站点
const startAgency = ref('')
const endAgency = ref('')
// 运输信息车辆信息
const car = ref('')
// 运输信息司机信息
const driver = ref('')
// 运输信息到达时间
const data = ref({})
// 获取信息详情
const getTransportManagerById = async () => {
  const res = await getTransportManagerByIdAPI(route.query.id)
  console.log(res, '详细数据')
  data.value = res.data
  datalist.value = res.data.order.orderCargoDTOS
  endAgency.value = res.data.taskTransports[0].endAgency.name
  startAgency.value = res.data.taskTransports[0].startAgency.name
  car.value = res.data.taskTransports[0].truck.licensePlate
  console.log(car.value, 'chepai')
  driver.value = res.data.taskTransports[0].drivers[0].name
  console.log(driver.value, 'siji')
}
getTransportManagerById()
const statuss = ref({
  22000: '已关闭',
  23000: '待取件',
  23001: '已取件',
  23002: '网点自寄',
  23003: '网点入库',
  23004: '待装车',
  23005: '运输中',
  23006: '网点出库',
  23007: '待派送',
  23008: '派送中',
  23009: '已签收',
  23010: '拒收',
  23011: '已取消',
})
// 货品信息
const datalist = ref([])
const columns = ref([
  {
    title: '序号',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    width: 60,
    customRender: ({ index }) => index + 1,
  },
  {
    title: '货品名称',
    dataIndex: 'name',
    width: 155,
  },
  {
    title: '货品类型',
    dataIndex: 'goodsType',
    width: 180,
  },
  {
    title: '重量(千克)',
    dataIndex: 'weight',
    width: 140,
  },
  {
    title: '体积(立方)',
    dataIndex: 'volume',
    width: 100,
  },
])
// 默认展开所有折叠面板
const activeKey = ref(['1', '2', '3'])
</script>
<style scoped>
.top {
  background-color: #fff;
  padding: 20px;
}
.base {
  margin-top: 30px;
}
.transport {
  width: 100%;
  padding-right: 600px;
}
.jian {
  display: flex;
  padding: 0 40px;
}
.jian img {
  margin-top: 5px;
  margin-right: 10px;
}
.hezi {
  position: relative;
  background-color: #f4f8fc;
  padding: 15px;
  width: 280px;
  height: 100px;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 50px;
}
.hezi::before {
  content: '';
  position: absolute;
  top: -60px; /* 调整箭头位置 */
  left: 50%;
  margin-left: -30px; /* 调整箭头位置 */
  border-width: 30px; /* 调整箭头大小 */
  border-style: solid;
  border-color: transparent transparent #f4f8fc transparent;
}
.li {
  margin: 4px;
}
.sp {
  margin-right: 28px;
}
</style>
